<!-- 出库明细 -->
<template>
	<view class="ku-content">
		<view class="ku-flex-button-content" v-if="shippingInfo">
			<view class="ku-section">
				<view class="ku-card">
					<view class="ku-card-head">
						{{shippingInfo.fnumber}}【{{shippingInfo.fname}}】
					</view>
					<u-divider></u-divider>
					<view class="ku-card-body">
						<view class="">
							仓库/仓位

						</view>
						<view class="ku-xs-title ku-margin-top-20">
							<!-- 000000人丝单面麻/110/A45花型 -->
							<view class="ku-mi-title">{{processingDisplayContentFun(shippingInfo.color)}}/
								{{processingDisplayContentFun(shippingInfo.size)}}/{{processingDisplayContentFun(shippingInfo.doorwidth)}}
							</view>
						</view>
						<view class="ku-xs-title ku-margin-top-20">
							<text class="ku-text-bold">备注信息：</text>{{processingDisplayContentFun(shippingInfo.fnote)}}
						</view>
					</view>
				</view>
				<view class="ku-card">
					<u--form labelPosition="left" ref="uForm">
						<!-- 仓库 -->
						<u-form-item label="仓库" borderBottom ref="ckname" @click="warehousePickerShow">
							<template v-if="shippingInfo.ckname">
								{{shippingInfo.ckname}}
							</template>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<!-- 仓位 -->
						<u-form-item label="仓位" borderBottom @click="positionPickerShow" ref="item1">
							<u-icon slot="right" name="arrow-right"></u-icon>
							<template v-if="shippingInfo.cwname">
								{{shippingInfo.cwname}}
							</template>
						</u-form-item>
						<!-- 颜色 -->
						<u-form-item label="颜色" borderBottom @click="colorPickerShow" ref="color">
							<u-icon slot="right" name="arrow-right"></u-icon>
							<template v-if="shippingInfo.color">
								{{shippingInfo.color}}
							</template>
						</u-form-item>
						<!-- 门幅 -->
						<u-form-item label="门幅" borderBottom @click="doorWidthPickerShow" ref="doorwidth">
							<u-icon slot="right" name="arrow-right"></u-icon>
							<template v-if="shippingInfo.doorwidth">
								{{shippingInfo.doorwidth}}
							</template>
						</u-form-item>
						<!-- 尺码 -->
						<u-form-item label="尺码" borderBottom @click="sizePickerShow" ref="color">
							<u-icon slot="right" name="arrow-right"></u-icon>
							<template v-if="shippingInfo.size">
								{{shippingInfo.size}}
							</template>
						</u-form-item>


					</u--form>
				</view>
				<view class="ku-margin-top-30">
					<u-row justify="space-between" gutter="10">
						<u-col span="6">
							<u-button shape='circle' :plain="true">{{shippingInfo.beequalto}}匹</u-button>
						</u-col>
						<u-col span="6">
							<u-button shape='circle' :plain="true">{{shippingInfo.meters}}米</u-button>
						</u-col>
					</u-row>
				</view>
				<view class="ku-card ku-margin-top-30">
					<u-grid :border="false" col="3">
						<u-grid-item @click="scanBarCodeFun('add')">
							<u-icon name="scan" size="28"></u-icon>
							<text class="grid-text">新增布卷</text>
						</u-grid-item>
						<u-grid-item @click="toClothRollList">
							<u-icon name="file-text" size="28"></u-icon>
							<text class="grid-text">布卷明细</text>
						</u-grid-item>
						<u-grid-item @click="scanBarCodeFun('deleate')">
							<u-icon name="scan" size="28"></u-icon>
							<text class="grid-text">删除布卷</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<view class="ku-flex-body">
				<view class="ku-section">
					<u-button type="primary" shape='circle' color="linear-gradient(to right,#235EFF, #235EFF)" text="完成"
						@click="confirmOutboundModalShwo"></u-button>
				</view>
			</view>

			<!-- 二次确认出库 -->
			<u-modal :show="showOutboundModal" :title="title" :showCancelButton='true'
				@confirm='confirmOoutboundSuccess' @cancel='cancelOutboundModal'></u-modal>

			<!-- 仓库信息 -->
			<u-picker :show="warehouseShow" :columns="warehouseColumns" title="仓库" keyName="fname"
				@cancel='cancelAllPicker' @confirm="confirmWarehouse"></u-picker>
			<!-- 仓位 -->
			<u-picker :show="positionShow" ref="uPicker" :columns="positionColumns" title="仓位"
				@confirm="confirmPosition" @cancel='cancelAllPicker' keyName="fname"></u-picker>
			<!-- 颜色 -->
			<u-picker :show="colorShow" :columns="colorOptionColumns" title="颜色" @confirm="confirmColor"
				@cancel='cancelAllPicker' keyName="fname"></u-picker>
			<!-- 门幅 -->
			<u-picker :show="doorWidthShow" :columns="doorWidthOptionColumns" @confirm="confirmDoorWidth" title="门幅"
				@cancel='cancelAllPicker' keyName="fname"></u-picker>
			<!-- 尺码 -->
			<!-- 带搜索的下拉控件 -->
			<FilterPicker ref="sizeFilterPickerRef" @confirmSearch="confirmSearchFilterPicker"
				@confirmPicker="confirmFilterPicker"></FilterPicker>



			<u-notify ref="uNotify"></u-notify>


			<!--  提示为找到对应布卷信息 -->
			<u-modal :show="modalShow" :title="modalTitle" :content='modalContent' @confirm="modalConfirm"
				:closeOnClickOverlay="true"></u-modal>
		</view>
	</view>
</template>

<script>
	import store from "@/store";
	import {
		getSalesOutboundInfo,
		getWareHouse,
		getPosition,
		getClothRoll,
		operationSalesOutboundOrder,
		getAuxiliaryProperties
	} from "@/api/index.js";
	import {
		phoneCameraScanCode,
		processingDisplayContent
	} from "@/utils/public.js";
	import FilterPicker from "@/components/FilterPicker";

	export default {
		components: {
			FilterPicker
		},
		data() {
			return {
				deliveryNoteID: '', // 发货单详情
				rowsNumber: '', // 行号
				shippingInfo: '', // 发货信息


				warehouseShow: false, // 选择仓库
				// 仓库列表 
				warehouseColumns: [
					[]
				],

				positionShow: false, // 选择仓位
				positionColumns: [
					[]
				], // 仓位列表


				colorShow: false, // 选择颜色
				colorShowObj: '', // 确认选择的颜色
				colorOptionColumns: [
					[]
				], // 颜色列表

				doorWidthShow: false, // 选择门幅
				doorWidthOptionColumns: [
					[]
				], // 门幅列表

				sizeOptionColumns: [
					[]
				], // 尺码列表


				editType: '', //  编辑类型

				modalShow: false,
				modalTitle: '提示',
				modalContent: '',

				showOutboundModal: false,
				title: '确定将对应物料与布卷出库吗？',
				showIndex: null
			};
		},
		/*
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 当前页面参数
			this.deliveryNoteID = options.deliveryNoteID;
			this.showIndex = options.index;
			console.log('发货单详情--deliveryNoteInfo-->', options);
			// this.initEmitMonitor();
			if (!this.$globalConfigs.IS_DEV) {
				window.callScanBack = this.callScanBack;
			}
			this.pageInit();
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {

		},
		/**
		   * 
		''   * 下拉刷新
		   */
		onPullDownRefresh() {
			// this.getSalesOutboundInfoFun();
		},
		methods: {
			async pageInit() {
				await this.getSalesOutboundInfoFun();
				this.getWareHouseFun();
				this.getAuxiliaryPropertiesFun();
			},
			// 获取销售出库信息 
			async getSalesOutboundInfoFun() {
				let params = {
					fid: this.deliveryNoteID,
				};

				await getSalesOutboundInfo(params).then((res) => {
					console.log('获取销售出库信息---res-->', res)
					if (res.code === 200 && res.datas && res.datas.length > 0) {

						this.shippingInfo = res.datas[this.showIndex] || {};
						// 获取行号
						this.rowsNumber = res.datas[this.showIndex].fseq;
						this.$nextTick(() => {
							this.getPositionFun();
						})

					} else {
						console.log('获取销售出库信息---res-->', res)
						// uni.showToast({
						// 	title: "用户或密码有误",
						// 	icon: "none",
						// 	duration: 2000,
						// });
					}
				})
			},
			// 获取仓库信息
			getWareHouseFun() {
				let params = {
					fname: '',
					fnumber: ''
				};
				console.log('获取仓库信息----params->', params)
				getWareHouse(params).then((res) => {
					console.log('获取仓库信息--list---res-->', res)
					if (res.code === 200 && res.datas) {
						let resDataFilter = res.datas.filter(item => {
							return item.fid !== '' && item.fid !== undefined && item.fid !== null;
						});
						this.warehouseColumns = [resDataFilter];
					} else {
						console.error('获取仓库信息---error-->', res)
						// uni.showToast({
						// 	title: "用户或密码有误",
						// 	icon: "none",
						// 	duration: 2000,
						// });
					}
				})
			},
			// 仓库
			warehousePickerShow() {
				console.log('仓库--事件', this.warehouseColumns);
				this.warehouseShow = true;
			},

			// 回调参数为包含columnIndex、value、values  确认仓库。仓位
			confirmWarehouse(e) {
				console.log('confirm----确定仓库/仓位---->', e)
				this.warehouseShow = false;
				// 设置显示信息
				try {
					let resVal = e.value[0];
					this.shippingInfo.ckid = resVal.fid;
					this.shippingInfo.ckname = resVal.fname;

					this.shippingInfo.cwid = '';
					this.shippingInfo.cwname = '';
					this.getPositionFun();
				} catch (e) {
					//TODO handle the exception
				}
			},


			// 获取 仓位信息
			getPositionFun() {
				if (this.shippingInfo.ckid === "0") {
					return
				}
				this.positionColumns = [
					[]
				];

				let params = {
					fid: this.shippingInfo.ckid
				};

				getPosition(params).then((res) => {
					// console.log('获取仓位信息--list---res-->', res)
					if (res.resp_code === 0 && res.datas) {
						let resDataFilter = res.datas.filter(item => {
							return item.fid !== '' && item.fid !== undefined && item.fid !== null && item
								.fname !== '';
						});
						this.positionColumns = [resDataFilter];
						if (this.positionColumns[0].length === 0) {
							this.$refs.uNotify.warning('当前仓库无应仓位');
							return
						}
					} else {
						console.error('获取仓位信息---error-->', res)
						this.$refs.uNotify.warning(res.resp_msg)
						// uni.showToast({
						// 	title: "用户或密码有误",
						// 	icon: "none",
						// 	duration: 2000,
						// });
					}
				})
			},

			// 仓位
			positionPickerShow() {
				console.log('仓位--事件', this.positionColumns[0]);
				if (this.positionColumns[0].length === 0) {
					this.$refs.uNotify.warning('当前仓库无应仓位')
					return
				}
				this.positionShow = true;
			},
			// 确认仓位信息
			confirmPosition(e) {
				console.log('confirm----确定/仓位---->', e)
				this.positionShow = false;
				// 设置显示信息
				try {
					let resVal = e.value[0];
					this.shippingInfo.cwid = resVal.fid;
					this.shippingInfo.cwname = resVal.fname;
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 关闭所有 
			cancelAllPicker() {
				this.warehouseShow = false; // 选择仓库
				this.positionShow = false; // 选择仓位
				this.colorShow = false; // 选择颜色
				this.doorWidthShow = false; // 选择门幅


			},

			// 根据物料id获取对应辅助属性 code 1颜色，2门幅，3尺码
			getAuxiliaryPropertiesFun() {
				// 获取颜色 
				getAuxiliaryProperties({
					queryCode: '',
					code: "1"
				}).then((res) => {
					console.log('获取-颜色-列表--list---res-->', res);
					if (res.resp_code === 0 && res.datas) {
						this.colorOptionColumns = [res.datas];
					} else {
						console.error('获取-颜色-信息---error-->', res)
						this.$refs.uNotify.warning(res.resp_msg)
					}
				})

				// 获取-门幅
				getAuxiliaryProperties({
					queryCode: '',
					code: "2"
				}).then((res) => {
					console.log('获取-门幅-列表--list---res-->', res);
					if (res.resp_code === 0 && res.datas) {
						this.doorWidthOptionColumns = [res.datas];
						console.log('获取-门幅-列表--list---res-->', this.doorWidthOptionColumns);
					} else {
						console.error('获取-门幅-信息---error-->', res)
						this.$refs.uNotify.warning(res.resp_msg)
					}
				})

			},
			// 获取尺码
			async getAuxiliaryPropertiesSize(queryCode) {
				// 获取-尺码
				await getAuxiliaryProperties({
					queryCode: queryCode,
					code: "3"
				}).then((res) => {
					console.log('获取-尺码-列表--list---res-->', res);
					if (res.resp_code === 0 && res.datas) {
						this.sizeOptionColumns = [res.datas];
					} else {
						console.error('获取-尺码-信息---error-->', res)
						this.$refs.uNotify.warning(res.resp_msg)
					}
				})
			},


			// 选择颜色
			colorPickerShow() {
				console.log('颜色--事件');
				if (this.colorOptionColumns[0].length === 0) {
					this.$refs.uNotify.warning('暂无颜色选项')
					return
				}
				this.colorShow = true;
			},
			confirmColor(e) {
				console.log('confirm----确定/颜色---->', e)
				this.colorShow = false;
				// 设置显示信息
				try {
					let resVal = e.value[0];
					this.shippingInfo.colorid = resVal.fid;
					this.shippingInfo.color = resVal.fname;
				} catch (e) {
					//TODO handle the exception
				}
			},

			// 选择 门幅
			doorWidthPickerShow() {
				console.log('获取-门幅-事件--list---res-->', this.doorWidthOptionColumns);
				if (this.doorWidthOptionColumns[0].length === 0) {
					this.$refs.uNotify.warning('暂无门幅选项')
					return
				}
				this.doorWidthShow = true;
			},
			confirmDoorWidth(e) {
				console.log('confirm----确定/门幅---->', e)
				this.doorWidthShow = false;
				// 设置显示信息
				try {
					let resVal = e.value[0];
					this.shippingInfo.doorwidthid = resVal.fid;
					this.shippingInfo.doorwidth = resVal.fname;
				} catch (e) {
					//TODO handle the exception
				}
			},

			// 确认搜索回调--选择 尺码
			async confirmSearchFilterPicker(val) {
				console.log('确认搜索回调--- callback -----> ', val);
				await this.getAuxiliaryPropertiesSize(val); // 获取尺码
				this.sizePickerShow()

			},
			// 点击确认返回值--选择 尺码
			confirmFilterPicker(val) {
				console.log('点击确认返回值--- callback -----> ', val);
				// 设置显示信息
				try {
					let resVal = val;
					this.shippingInfo.sizeid = resVal.fid;
					this.shippingInfo.size = resVal.fname;
				} catch (val) {
					//TODO handle the exception
				}
			},

			// 选择 尺码
			sizePickerShow() {
				console.log('尺码--事件');

				this.$refs.sizeFilterPickerRef.componentInit(this.sizeOptionColumns[0], 'fname');

			},
	



			// 扫条形码
			scanBarCodeFun(type) {
				this.editType = type;
				if (this.shippingInfo.cwid && this.shippingInfo.cwid != 0) {
					this.scanCodeClick();
				} else {
					uni.showToast({
						title: '请先选择仓库/仓位',
						icon: "none",
						duration: 3000,
					});
				}

			},
			// 扫码方法--公共
			async scanCodeClick() {
				console.log(this.$globalConfigs.IS_DEV);
				if (this.$globalConfigs.IS_DEV) {
					await phoneCameraScanCode(['barcode', 'qrCode'], true).then((res) => {
						console.log('扫码方法--公共--res-->', res);
						if (res.state === '0000') {
							this.$nextTick(() => {
								this.getClothRollFun(res.result);
							})
						} else {
							console.log('扫码--请重试！')
						}
					});

				} else {
					window.android.callScan();
				}
			},

			//扫码数据回调
			callScanBack(res) {
				console.log('扫码数据回调----->', res);
				if (typeof res === 'string') {
					try {
						let result = {};
						result = JSON.parse(res);
						console.log('扫码数据回调----->', result);
						if (result.status_code === 200 && result.code) {
							uni.showToast({
								title: result.code,
								icon: "none",
								duration: 3000,
							});
							this.$nextTick(() => {
								this.getClothRollFun(result.code);
							})
						}
					} catch (err) {
						//TODO handle the exception
						this.$refs.uNotify.warning('扫码错误请重新扫码！');
					}
				}
				uni.hideLoading();
			},
			// 获取 根据布卷单据编号获取布卷信息
			getClothRollFun(barCode) {
				let params = {
					fnumber: barCode
				};

				getClothRoll(params).then((res) => {
					if (res.resp_code === 0) {
						console.log('根据布卷单据编号获取布卷信息-----res-->', res)
						this.operationSalesOutboundOrderFun(res.datas)
					} else {
						this.modalContent = `编码:【${barCode}】${res.resp_msg}`;
						this.modalShow = true;
						console.error('根据布卷单据编号获取布卷信息---error-->', res)
						// uni.showToast({
						// 	title: "用户或密码有误",
						// 	icon: "none",
						// 	duration: 2000,
						// });
					}
				})
			},
			// 销售出库单保存、删除
			operationSalesOutboundOrderFun(parameters) {
				let _that = this;
				console.log('销售出库单保存、删除-----params-->', parameters)
				console.log('扫条形码----仓位----this.editType-->', this.editType)
				let params = {
					fseq: this.rowsNumber, // 行号
					xsckFid: this.shippingInfo.fid,
					code: this.editType === 'add' ? 0 : 1, // 状态，0-保存，1-删除
					ckid: this.shippingInfo.ckid, // 仓库id
					cwid: this.shippingInfo.cwid, // 仓位id
					color: '', // 颜色
					colorid: this.shippingInfo.colorid,
					size: '', // 尺码
					sizeid: this.shippingInfo.sizeid,
					doorwidth: '', // 门幅
					doorwidthid: this.shippingInfo.doorwidthid,

					clothRolls: [{
						...parameters
					}]
				};
				console.log('销售出库单保存-----params-->', params);
				operationSalesOutboundOrder(params).then((res) => {
					console.log('销售出库单保存-----res-->', res)
					if (res.code === 200) {
						this.$refs.uNotify.success('操作成功！');
						this.getSalesOutboundInfoFun();

						setTimeout(function() {
							_that.scanCodeClick();

						}, 1000);

					} else {
						this.$refs.uNotify.warning(res.resp_msg)
						console.error('根据布卷单据编号获取布卷信息---error-->', res)
						// uni.showToast({
						// 	title: "用户或密码有误",
						// 	icon: "none",
						// 	duration: 2000,
						// });
					}
				})
			},
			// 关闭提示框
			modalConfirm() {
				this.modalShow = false;
			},
			// 确认出库
			confirmOutboundModalShwo() {
				console.log('确认出库--事件');
				this.showOutboundModal = true;
			},
			// 	取消
			cancelOutboundModal() {
				this.showOutboundModal = false;
			},

			// 出库成功
			confirmOoutboundSuccess() {
				let _that = this;
				this.showOutboundModal = false;

				// 完成走一边保存接口，用来更新此页面
				let params = {
					xsckFid: this.shippingInfo.fid,
					code: 0, // 状态，0-保存，1-删除
					ckid: this.shippingInfo.ckid, // 仓库id
					cwid: this.shippingInfo.cwid, // 仓位id
					color: '', // 颜色
					colorid: this.shippingInfo.colorid,
					size: '', // 尺码
					sizeid: this.shippingInfo.sizeid,
					doorwidth: '', // 门幅
					doorwidthid: this.shippingInfo.doorwidthid,
					clothRolls: []
				};
				console.log('销售出库单保存-----params-->', params)
				operationSalesOutboundOrder(params).then((res) => {
					console.log('销售出库单保存-----res-->', res)
					if (res.code === 200) {
						_that.$navTo(`pages/warehouse/outboundSuccess`, {
							deliveryNoteID: _that.deliveryNoteID
						});
					} else {
						this.$refs.uNotify.warning(res.resp_msg)
						console.error('根据布卷单据编号获取布卷信息---error-->', res)
						// uni.showToast({
						// 	title: "用户或密码有误",
						// 	icon: "none",
						// 	duration: 2000,
						// });
					}
				});

			},
			// 跳转到布卷明细列表
			toClothRollList() {
				this.$navTo(`pages/warehouse/clothRollList`, {
					...this.shippingInfo
				});
			},
			// 处理内容显示内容
			processingDisplayContentFun(val) {
				return processingDisplayContent(val);
			},
		}
	}
</script>

<style lang="scss">

</style>